<template>
<div class="homes">
    <div class="home_from">
        <el-form
            :inline="true"
            ref="ruleFormRef"
            label-position="top"
            :model="formLabelAlign"
            :rules="rules"
        >
        <!--  -->
        <div class="citys">
            <!-- 出发城市 -->
            <div class="upCity">
                <el-form-item
                    prop="upCity"
                    @click="upCard = !upCard"
                    :rules="[
                        {
                        required: true,
                        message: '出发城市不能为空',
                        trigger: 'blur',
                        },
                    ]"
                    >
                    <el-input
                        v-model="formLabelAlign.upCity"
                        placeholder="出发城市"
                        maxlength="10"
                        size="large"
                        :prefix-icon="LocalTwo"
                        @blur="upCard = false"
                    />
                    <div class="card" v-show="upCard">
                        <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                            <span>出发城市</span>
                            </div>
                        </template>
                        <div v-for="item in city" class="text" :key="item.index">
                            <div @mousedown="upCityChoice(item)">
                                {{ item }}
                            </div>
                        </div>
                        </el-card>
                    </div>
                </el-form-item>
            </div>
            
            <!-- 转换 -->
            <el-button @click="exchange" class="switch_btn">
                <Switch theme="outline" size="24" fill="#333"/>
            </el-button>

            <div class="downCity">
                <!-- 到达城市 -->
                <el-form-item prop="downCity" @click="downCard = !downCard">
                <el-input
                    placeholder="到达城市"
                    maxlength="10"
                    v-model="formLabelAlign.downCity"
                    size="large"
                    @blur="downCard = false"
                    :prefix-icon="LocalTwo"
                />
                <div class="card" v-show="downCard">
                    <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                        <span>到达城市</span>
                        </div>
                    </template>
                    <div v-for="item in city" class="text" :key="item.index">
                        <div @mousedown="downCityChoice(item)">
                        {{ item }}
                        </div>
                    </div>
                    </el-card>
                </div>
                </el-form-item>
            </div>
        </div>
        <!--  -->
        <div class="date-flight">
            <div class="upDate">
                <!-- 出发日期 -->
                <el-form-item prop="upDate">
                    <el-date-picker
                        v-model="formLabelAlign.upDate"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="出发日期"
                        size="large"
                        :disabled-date="disabled"
                    />
                </el-form-item>
            </div>
            <div class="border-r"></div>
            <div class="flight-div">
                <!-- 返回日期 -->
                <el-form-item prop="return_Date">
                    <el-date-picker
                        v-model="formLabelAlign.return_Date"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="返回日期"
                        size="large"
                        :disabled-date="returnDisabled"
                    />
                </el-form-item>
            </div>
        </div>
        <!--  -->
            <el-button
                class="home_btn"
                color="rgb(10,22,46)"
                round
                @click="onSubmit"
                :icon="Search"
                >
            </el-button>
        </el-form>
    </div>
</div>

</template>

<script setup>
import { Search } from "@icon-park/vue-next"
import { reactive, ref, getCurrentInstance, computed } from "vue";
import Carousel from "../Small/Carousel.vue";
import SpecialFlights from "../Small/Special_Flights.vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import url from "../../common/js/APIUtil";
import {Switch, LocalTwo} from "@icon-park/vue-next"


var city=ref([])
var upCard = ref(false);
var downCard = ref(false);
//表单数据
var formLabelAlign = reactive({
  upCity: "",
  downCity: "",
  upDate: "",
  return_Date: "",
});
//启航时间限制
const disabled = (time)=>{
  return time.getTime() < Date.now() - 8.64e7;
}
//返程时间限制
let returnDisabled = computed(() => {
  return (time) => {
    if (formLabelAlign.upDate != '' && formLabelAlign.upDate != null) {
      return time.getTime() < new Date(Date.parse(formLabelAlign.upDate.replace(/-/g, "/")) + 8.64e7);
    } else {
      return time.getTime() < Date.now() - 8.64e7;
    }
  };
})
//往返日期验证
let validateRoundendTime = (rule, value, callback,) => {
  if (new Date(formLabelAlign.return_Date).getTime() <= new Date(value).getTime()) {
    callback(new Error('启程日期不能晚于或等于返程日期'))
  } else {
    callback()
  }
}
//路由
const router = useRouter();
let route = useRoute();
const { proxy } = getCurrentInstance();
//表单验证
var ruleFormRef = ref();
var rules = reactive({
  upCity: [{ required: true, message: "出发城市不能为空", trigger: "blur" }],
  downCity: [
    { required: true, message: "目的地城市不能为空", trigger: "blur" },
  ],
  upDate: [
    { required: true, message: "出发日期不能为空", trigger: "blur" },
    { validator: validateRoundendTime,trigger: 'blur'},
    ],
  return_Date: [
    { required: true, message: "返回日期不能为空", trigger: "blur" }
    ],
});
//提交查询
const onSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      router.push({
        path: "/index/ticketinformation/round",
        query: {
          upCity: formLabelAlign.upCity,
          downCity: formLabelAlign.downCity,
          upDate: formLabelAlign.upDate,
          downDate: formLabelAlign.return_Date,
        },
      });
    } else {
      ElMessage.error("请输入正确数据");
      return false;
    }
  });
};
//输入框数据交换
const exchange_data = ref();
const exchange = () => {
  exchange_data.value = formLabelAlign.upCity;
  formLabelAlign.upCity = formLabelAlign.downCity;
  formLabelAlign.downCity = exchange_data.value;
};

const getCityAll = () => {
  proxy.$http.get(url.API_GET_citAll).then((res) => {
    city.value = Array.from(new Set(res.data.map(value=>value.name)))
  });
};
getCityAll();
const upCityChoice = (value) => {
  formLabelAlign.upCity = value;
  upCard.value = false;
};
const downCityChoice = (value) => {
  formLabelAlign.downCity = value;
  downCard.value = false;
};
</script>

<style scoped>

.homes{
    width: 100%;
    height: 100%;
    margin: auto;
    transform: translate(8%, 22%);
}
.home_from{
    width: 100%;
    height: 100%;
    margin: auto;
}
.el-button.is-round {
    border-radius: 8px;
}
.card-header{
  height: 5px;
  transform: translate(0%, -140%);
}
.card {
  position: absolute;
  pointer-events: auto;
  width: 400px;
  top: 67px;
  z-index: 2000;
}
.btn {
  margin-left: 5px;
}
.text {
  float: left;
  font-size: 15px;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.text:hover {
  color: rgba(6, 127, 249);
  background-color: rgba(6, 127, 249, 0.1);
}
/* 搜索按钮 */
.home_btn {
  font-size: 20px;
  height: 92px;
  width: 92px;
  transform: translate(29%, 0%);
}
.switch_btn {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  margin: auto;
  transform: translate(564%, -180%);
  background-color: rgba(0, 0, 0, 0.0);
}
.citys{
    width: 38%;
    height: 92px;
    border-radius: 8px;
    border: solid 1px #c8c9cc;
    transform: translate(0%, 0%);
}
/* 出发城市 */
.upCity{
    width: 47%;
    height: 100%;
    transform: translate(14%, 28%);
}
/* 到达城市 */
.downCity{
    width: 47%;
    height: 100%;
    transform: translate(114%, -110%);
}
.date-flight{
    width: 38%;
    height: 92px;
    border-radius: 8px;
    border: solid 1px #c8c9cc;
    transform: translate(3%, 0%);
}
/* 出发日期 */
.upDate{
    width: 47%;
    height: 100%;
    transform: translate(10%, 28%);
}
/* 航班号 */
.flight-div{
    width: 47%;
    height: 100%;
    transform: translate(114%, -72%);
}
.border-r{
    position: absolute;
    height: 75%;
    transform: translate(0%, -118%);
    margin-left: 49%;
    border-right: solid 1px rgb(196,213,229);
}
</style>